<script setup lang="ts">
import {ref} from "vue";

const show = ref(false)
const type = ref('A')
var ok = ref(true)
</script>

<template>
  <div>
    <h1>Condition Render 条件渲染</h1>
    <button @click="show =!show">点击我</button>

    <h1 v-if="show">显示内容</h1>
    <h1 v-else>不显示内容</h1>
    <p></p>
    <div>
      <div v-if="type === 'A'">
        A
      </div>
      <div v-else-if="type === 'B'">
        B
      </div>
      <div v-else-if="type === 'C'">
        C
      </div>
      <div v-else>
        Not A/B/C
      </div>
    </div>
    <div>
      <template v-if="ok">
        <h1>Title</h1>
        <p>Paragraph 1</p>
        <p>Paragraph 2</p>

      </template>
      <h1 v-show="ok">Hello!</h1>
    </div>
  </div>
</template>

<style scoped>

</style>